<template>
	<view>
		<view class=" bg box-sizing" style="background-image: url('/static/icon/bg.png');">
			<view class="pl-12" :style="`padding-top: ${height}px;padding-right:${right}px;`">
				<view class="flex flex-y-center">
					<view class="flex flex-y-center round-30 bg-white py-9 px-12 flex-1">
						<view class="iconfont icon-sousuo fs-15 fw-600 text-D4 mr-6"></view>
						<input placeholder="请输入关键字搜索" v-model='query.name' placeholder-class="fs-12 "
							@confirm="search()" />
					</view>
					<text class="fs-15 text-blue-1 fw-600  ml-6" @click="search()">搜索</text>
				</view>
			</view>
			<view class="p-13 box-sizing">
				<swiper autoplay interval="2000" circular class="h-150 overflow-hidden">
					<swiper-item v-for="(item,index) in adsList" :key="index" class="overflow-hidden h-150 round-8">
						<image :src="item.image_url" class="w-p-100 h-150" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="p-10">
			<view class="grid-columns-5 grid-gap-12 text-center">
				<view v-for="(item,index) in navList" :key='index'>
					<!-- #ifdef MP-WEIXIN -->
					<view class="flex flex-column grid-gap-8 flex-center" @click="jump(item)">
						<image :src="item.image" class="w-40 h-40 img_flex"></image>
						<text class="fs-13">{{item.name}}</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="flex flex-column grid-gap-8 flex-center" @click="jump(item)" v-if='item.type!=2'>
						<image :src="item.image" class="w-40 h-40 img_flex"></image>
						<text class="fs-13">{{item.name}}</text>
					</view>
					<wx-open-launch-weapp :appid="item.appid" :path="item.path" id="launch-btn" style="display: block;"
						v-if='item.type==2'>
						<component :is="'script'" type="text/wxtag-template">
							<view style="display: flex;
									flex-direction: column;
									gap: .5rem !important;
									align-items: center;
									justify-content: center;">
								<img :src="item.image" style="width: 40px; height:40px; flex-shrink:0;"></img>
								<text style="font-size: 13px; text-align: center;">{{item.name}}</text>
							</view>
						</component>
					</wx-open-launch-weapp>
					<!-- #endif -->
				</view>

			</view>
		</view>

		<view class="px-12 ">
			<view class="py-11 px-8 round-6  flex flex-y-center bg-white">
				<view class="iconfont icon-yinlianglabashengyin fs-20 text-blue-1 mr-8"></view>
				<view class="overflow-hidden flex-1">
					<view class="scrolling-text">
						<text class="fs-14 fw-500 text-blue-1">{{WEBCONFIG?.notice}}</text>
					</view>
				</view>
			</view>
		</view>


		<!-- <view class="bg-white">
			<view class="px-8" v-if='WEBCONFIG?.offical_code'>
				<view class="flex-y-center flex grid-gap-12 py-8 border-bottom-eee">
					<image :src="WEBCONFIG?.offical_logo" class="w-80 h-80 img_flex"></image>
					<view class="flex flex-column grid-gap-10 flex-1">
						<text>{{WEBCONFIG?.offical_name}}</text>
						<text class="text-666">{{WEBCONFIG?.offical_desc}} </text>
					</view>
					<view>
						<view class="round-30 px-8 text-white py-4 btn fs-13" @click="popup=true">关注公众号</view>
					</view>
				</view>
			</view>

		</view> -->


		<view class="overflow-hidden  pt-20 px-8">
			<view class="flex overflow-x-scroll w-p-100 " style="scrollbar-height: none;">
				<view v-for="(item,index) in categoryList" :key='index'>
					<view class="mx-12 " :class="query.category_id==item.id?'line' : ''" @click="changeTabs(item)">
						<text class=" text-nowrap"
							:class="query.category_id==item.id?'fs-17 fw-600':'fs-15 text-666'">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<z-paging ref='paging' v-model="list" use-page-scroll @query="getList">
			<view class="px-12 flex flex-column grid-gap-6 mt-9">
				<view class="p-16 flex flex-y-center box-sizing w-p-100 round-8 bg-white" v-for="(item,index) in list"
					:key="index" @click="$page.open('/pages/community/detail?id='+item.id)">
					<image :src="item.cover_image" class="w-70 h-70 round-10 img_flex"></image>
					<view class="flex flex-column px-12 flex-1 grid-gap-8">
						<text class="fs-16 fw-600 text-ellipsis-1">{{item.name}}</text>
						<text class="fs-14 text-999 mt-6 text-ellipsis-3">{{item.desc}}</text>
					</view>
					<view>
						<button class="w-90 py-4 text-white round-30 fs-13 text-ellipsis-1"
							:style="`background-color:${item.button_color}`">
							{{item.type=='1'? item.button_text:item.type=='2'?"VIP社群":'免费进群'}}
						</button>
					</view>
				</view>
			</view>
		</z-paging>

		<y-popup v-if='popup' round='14rpx' @close="popup=false">
			<view class="bg-white text-center flex flex-column grid-gap-12 p-20">
				<text class="fs-17">{{WEBCONFIG?.offical_name}}</text>
				<image :src='WEBCONFIG?.offical_code' class="w-200 img_flex" mode="widthFix" show-menu-by-longpress>
				</image>
				<text class="text-999 fs-13">长按保存</text>
			</view>
		</y-popup>

		<image @click="popup=true" :style="`bottom:${bottom}px`" class="w-70 h-56 position-fixed right-12  z-999"
			src="@/static/icon/gzgzh.png"></image>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom, onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import { useStorage, $http, $page } from '@/utils/index'
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const categoryList = ref()
	const adsList = ref([])
	const list = ref([])
	const popup = ref(false)
	const bottom = ref(12)
	const paging = ref()
	const query = ref({
		page: 1,
		limit: 10,
		category_id: 9999,
		name: ''
	})
	const navList = ref([])
	const height = ref(5)
	const right = ref(12)
	onLoad(() => {
		height.value = height.value + uni.getSystemInfoSync().statusBarHeight
		// #ifdef MP-WEIXIN
		right.value = (uni.getSystemInfoSync().screenWidth - uni.getMenuButtonBoundingClientRect().left) + right
			.value
		// #endif
		getCategory()
		getAds()
		uni.$once('initConfig', () => {
			uni.setNavigationBarTitle({
				title: WEBCONFIG?.value.web_name
			})
		})
		getNav()
		// #ifdef H5
		if (uni.getSystemInfoSync().osName == 'ios') {
			bottom.value = bottom.value + 100
		} else {
			bottom.value = bottom.value + 50
		}

		const script = document.createElement('script');
		script.type = "text/javascript";
		script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
		script.onload = () => {
			init()
		}
		document.body.appendChild(script)
		// #endif
	})

	const jump = (e) => {
		if (e.type == 1) {
			$page.open(e.path + '?' + e.params)
		}
		if (e.type == 2) {
			// #ifdef MP-WEIXIN
			uni.navigateToMiniProgram({
				appId: e.appid,
				path: e.path
			})
			// #endif
			// #ifdef H5

			wx.miniProgram.switchTab({
				appId: e.appid,
				url: e.path || 'pages/index/index'
			})
			// #endif
		}

		if (e.type == 3) {
			// #ifdef MP-WEIXIN
			$page.open('/pages/webview/index?url=' + e.path)
			// #endif

			// #ifdef H5
			window.location.href = e.path
			// #endif
		}
	}

	const getNav = () => {
		$http.get('Nav/getList').then(res => {
			navList.value = res.data
		})
	}
	const init = () => {
		$http.get('Mp/getConfig').then(res => {
			wx.config({
				debug: false,
				appId: res.data.appId, //公众号
				timestamp: res.data.timestamp,
				nonceStr: res.data.nonceStr,
				signature: res.data.signature,
				jsApiList: res.data.jsApiList,
				openTagList: ['wx-open-launch-weapp']
			})
			wx.ready(function() {
				wx.updateAppMessageShareData({
					title: WEBCONFIG.value.share_title,
					desc: WEBCONFIG.value.share_title,
					link: res.data.url,
					imgUrl: WEBCONFIG.value.share_image,
					success: function() {},
					catch: (err) => {
						alert(err)
					}
				})
			});
			wx.error(function(res) {
				console.log(res)
			});
		})
	}
	const getCategory = () => {
		$http.get('Category/getList').then(res => {
			categoryList.value = res.data
		})
	}
	const getAds = () => {
		$http.get('Ads/getList').then(res => {
			adsList.value = res.data
		})
	}
	const changeTabs = (e) => {
		query.value.category_id = e.id
		paging.value.reload()
	}

	const search = () => {
		if (query.value.name != '') {
			paging.value.reload()
		}
	}

	const getList = (page, limit) => {
		query.value.page = page
		query.value.limit = limit
		$http.get('Community/getList', query.value).then(res => {
			paging.value.complete(res.data)
		})
	}

	//分享
	onShareTimeline(() => {
		let id = USERINFO.value.id || 0
		return {
			title: WEBCONFIG.value?.share_title || WEBCONFIG.value?.web_name || '',
			query: 'pages/index/index?id=' + id,
			imageUrl: WEBCONFIG.value?.share_image || ''
		}
	})

	onShareAppMessage(() => {
		let id = USERINFO.value.id || 0
		return {
			title: WEBCONFIG.value?.share_title || WEBCONFIG.value?.web_name || '',
			path: 'pages/index/index?id=' + id,
			imageUrl: WEBCONFIG.value?.share_image || ''
		}
	})
</script>

<style scoped>
	.bg {
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	page {
		background-color: #F9FBFD;
	}

	.scrolling-text {
		overflow: hidden;
		white-space: nowrap;
		animation: scroll 5s linear infinite;
	}

	@keyframes scroll {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.btn {
		background-color: #d7a860;
	}

	.line {
		background: linear-gradient(90deg, rgba(31, 131, 254, 0) 0%, #1F83FE 100%);
		background-size: 100% 8rpx;
		background-repeat: no-repeat;
		background-position: 0 90%;
	}

	.h-56 {
		height: 112rpx;
	}

	.z-999 {
		z-index: 99999;
	}
</style>